<div class="max-w-lg p-4 shadow-md" [ngClass]="['bg' + contrast, 'text' + defaultInv]">
	<div class="flex justify-between pb-4 border-bottom">
		<div class="flex items-center">
			<a
				rel="noopener noreferrer"
				href="#"
				class="mb-0 capitalize"
				[ngClass]="['text' + defaultInv]"
			>
				Photography
			</a>
		</div>
		<a rel="noopener noreferrer" href="#" class="">See All</a>
	</div>
	<div class="space-y-4">
		<div class="space-y-2">
			<img
				class="block object-cover object-center w-full rounded-md h-72 bg-gray-500"
				src="https://source.unsplash.com/random/480x360/?4"
				alt=""
			/>
			<div class="flex items-center text-xs">
				<span>6 min ago</span>
			</div>
		</div>
		<div class="space-y-2">
			<a rel="noopener noreferrer" href="#" class="block">
				<h3 class="text-xl font-semibold" [ngClass]="['text' + primary]">
					Facere ipsa nulla corrupti praesentium pariatur architecto
				</h3>
			</a>
			<p class="leading-snug" [ngClass]="['text' + plainInv]">
				Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat, excepturi. Lorem
				ipsum dolor sit amet consectetur, adipisicing elit. Repellat, excepturi.
			</p>
		</div>
	</div>
</div>
